<template>
  <div class="login-wrap">
    <el-form
      label-position="left"
      :model="nameValidateForm"
      :rules="rules"
      ref="nameValidateForm"
      label-width="0px"
      class="demo-nameValidateForm login-container"
    >
     <h3 class="title">MBTI测试平台</h3>
      <h2 class="titl"> 管理员登录</h2>
      <el-form-item prop="name">
        <el-input type="text" v-model="nameValidateForm.name" auto-complete="off" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="nameValidateForm.password" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>



      <el-form-item style="float: right">
        <el-button color="#626AEF" type="success" size="large" @click="submitForm('nameValidateForm')" >登录</el-button>
        <el-button color="#B1B5F7" type="primary" size="large" @click="makeweb('nameValidateForm')" >返回学生登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'
export default {
  name: 'Register',
  data() {
    return {
      nameValidateForm: {
        code: '',
        name: '',
        password: '',
        lastpassword: '',
      },
    }
  },
  methods: {
    get_account(formName) {
      this.$axios
        .get('/login', { params: { username: this.nameValidateForm.name, userpassword: this.nameValidateForm.password } })
        .then(function (res) {
          localStorage.setItem('userdata', res.data.username)
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    submitForm(formName) {
      this.get_account()
      this.$refs.nameValidateForm.validate(valid => {
        if (valid) {
          //alert('Name:'+this.nameValidateForm.name+';Password:'+this.nameValidateForm.password);
          // console.log(this.nameValidateForm.name);
          this.$axios.get('/loginsuccess').then(res => {
            this.nameValidateForm.code = res['data']['code']
            if (this.nameValidateForm.code === '10'&&res.data.password&&res.data.spassword) {
              this.$router.push({ path: '/indexadmin', name: 'Indexadmin' })
              window.sessionStorage.setItem('useroradmin', '1')
            } else {
              alert('用户名或密码错误')
              return false
            }
            
          })
        } else {
          alert('未填写完整！')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs.nameValidateForm.resetFields()
    },
    makeweb() {
      this.$router.push({ path: '/login', name: 'Login' })
    },
  },
}
</script>

<style scoped>
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  background-color: #090E1C;
  
  /* background-color: #112346; */
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
}
.login-container {
 border-radius: 10px;
  margin: 0px auto;
  width: 400px;
  padding: 50px 50px 60px 50px;
  background: #eee;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}
.title {
  margin: 0px auto 40px auto;
  text-align: center;
  font-size: 40px;
}
.titl {
  margin: 0px auto 10px auto;
  text-align: center;
  font-size: 20px;
}
.remember {
  margin: 0px 0px 35px 0px;
}
.code-box {
  text-align: right;
}
.codeimg {
  height: 40px;
}
</style>
